<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useCounterStore } from './store/counter';
const store = useCounterStore()
const router=useRouter()

 const onGo=()=>{
// 1
  router.push('/home')
// }
// 2
// const onGo=()=>{
//   router.push({
//     path:'/home'
//   })router
// }
// 3命名跳转
// const onGo=()=>{
//   router.push({
//     name:'aa'
//   })
//携带参数
// 1 
// router.push("/home?a=1&b=2")
// 2 
// router.push({
//     path: "/home",
//     query: {
//       a: 1,
//       b: 2
//     }
//   })
// 3 
// router.push({
//     name:"aa",
//     query:{
//       a:100,b:200
//     }
//   })
// 1 
// router.push('/search/100')
// 2 
// router.push({
//     name:"cc",
//     params:{
//       word:200
//     }
//   })
 }
</script>

<template>
  <div id="app">
    <div class="link">
      {{ store.count }} {{ store.doubleCount }}
      <button @click="store.update()">count++</button>
      <button @click="store.asyncUpdate()">async update</button>
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
      <button @click="onGo">跳转</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
.link {
  height: 50px;
  line-height: 50px;
  background-color: #495150;
  display: flex;
  margin: -8px -8px 0 -8px;
  margin-bottom: 50px;
}

.link a {
  display: block;
  text-decoration: none;
  background-color: #ad2a26;
  width: 100px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  border-radius: 5px;
}
</style>